import {designPage, reactive} from "plain-design-composition";
import data from "../../../data/data-1.json";
import {DemoRow} from "../../Demo/DemoRow";
import {Adc, AdcGroup, AdcIndex, Checkbox, Form, FormItem, InputNumber, Switch} from "../../../../packages";
import AntdTable from "../../../../packages/components/AntdTable";
import {Table, TableProps} from "antd";
import {iAdtNode} from "../../../../packages/components/AntdTable/utils/antd-table.utils";
import React from "react";
import {ColumnsType} from "antd/es/table";
import {DemoLine} from "../../Demo/DemoLine";

export const demo1 = designPage(() => {

  const state = reactive({
    data,
    summaryData: [
      {
        "id": 0,
        "color": "#79f285",
        "name": "Lisa",
        "date": "2002-04-28",
        "star": "★★★★★★★",
        "size": 49
      },
      {
        "id": 1,
        "color": "#f27990",
        "name": "George",
        "date": "2019-01-06",
        "star": "★★★★★★★★",
        "size": 74
      },
    ],
    other: {
      hasSummaryData: true,
      groupHead: true,
    },
    props: {
      headRowHeight: 45,
      bodyRowHeight: 40,
      bordered: true,
      virtual: false,
    },
    plc: {
      width: 200,
      align: 'left',
      init: true,
      hide: undefined,
    },
  });

  const summary: TableProps<iAdtNode>['summary'] = () => {
    return (
      <Table.Summary fixed>
        <Table.Summary.Row>
          <Table.Summary.Cell index={0}>sum</Table.Summary.Cell>
          <Table.Summary.Cell index={1}>summary fixed left</Table.Summary.Cell>
          <Table.Summary.Cell index={2}>This is a summary content</Table.Summary.Cell>
        </Table.Summary.Row>
      </Table.Summary>
    );
  };

  return () => (
    <DemoRow title={'固定列'}>
      <DemoLine>
        <Form column={1}>
          <FormItem label={'列宽度响应测试'}>
            <InputNumber v-model={state.plc.width} step={100}/>
          </FormItem>
          <FormItem label="表头行高">
            <InputNumber v-model={state.props.headRowHeight} step={5}/>
          </FormItem>
          <FormItem label="表体行高">
            <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
          </FormItem>
          <FormItem label="列销毁测试(名称)">
            <Switch v-model={state.plc.init}/>
          </FormItem>
          <FormItem label="带边框">
            <Checkbox v-model={state.props.bordered}/>
          </FormItem>
          <FormItem label="合计行">
            <Switch v-model={state.other.hasSummaryData}/>
          </FormItem>
          <FormItem label="表头分组">
            <Switch v-model={state.other.groupHead}/>
          </FormItem>
          <FormItem label="启用虚拟滚动">
            <Switch v-model={state.props.virtual}/>
          </FormItem>
          {!!state.other.groupHead && <>
            <FormItem label="hide:(评分)">
              <Switch v-model={state.plc.hide}/>
            </FormItem>
          </>}
        </Form>
      </DemoLine>
      <AntdTable
        dataSource={data}
        summaryDataSource={state.other.hasSummaryData ? state.summaryData : undefined}
        {...state.props}
        showRows={10}
        pagination={{ pageSize: 20 }}
      >

        {!!state.other.groupHead && <>
          <AdcIndex/>
          <Adc title={'编号'} dataIndex={'id'} fixed={'left'} width={state.plc.width}/>
          <Adc title={'编号'} dataIndex={'id'}/>
          <Adc title={'大小'} dataIndex={'size'}/>
          <AdcGroup title={'地址'} fixed={'left'}>
            <Adc dataIndex="date" title="日期"/>
            <Adc dataIndex="color" title="颜色"/>
          </AdcGroup>
          <Adc title={'编号'} dataIndex={'id'}/>
          <Adc title={'评分'} dataIndex={'star'}/>
          <Adc title={'地址'} dataIndex={'addr'}/>

          {state.plc.init && <Adc title={'名称'} dataIndex={'name'}/>}
          <AdcGroup title={'站点'} fixed={'right'}>
            <Adc dataIndex={'url'} title={'链接'}/>
            <Adc dataIndex={'domain'} title={'域名'}/>
          </AdcGroup>

          <Adc title="协议" dataIndex="protocol"/>
          <Adc title="邮箱" dataIndex="email"/>
          <Adc title="ip" dataIndex="ip"/>
        </>}
        {!state.other.groupHead && <>
          <AdcIndex/>
          <Adc dataIndex="id" title="编号" fixed={'left'}/>
          <Adc dataIndex="size" title="大小"/>
          <Adc dataIndex="date" title="日期"/>
          <Adc dataIndex="color" title="颜色"/>
          {!!state.plc.init && <Adc dataIndex="name" title="名称" fixed={'right'}/>}
          <Adc dataIndex="star" title="评分"/>
          <Adc dataIndex="addr" title="地址"/>
          <Adc dataIndex="url" title="链接"/>
          <Adc dataIndex="domain" title="域名"/>
          <Adc dataIndex="protocol" title="协议"/>
          <Adc dataIndex="email" title="邮箱"/>
          <Adc dataIndex="ip" title="ip"/>
        </>}
      </AntdTable>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  interface FixedDataType {
    key: React.Key;
    name: string;
    l_name: string;
    r_name: string;
    description: string;
  }

  const fixedColumns: ColumnsType<FixedDataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
      fixed: true,
      width: 100,
    },
    {
      title: 'Left',
      dataIndex: 'l_name',
      fixed: true,
      width: 100,
    },
    {
      title: 'Description',
      dataIndex: 'description',
    },
    {
      title: 'Right',
      dataIndex: 'r_name',
      fixed: 'right',
      width: 100,
    },
  ];

  const fixedData: FixedDataType[] = [];
  for (let i = 0; i < 20; i += 1) {
    fixedData.push({
      key: i,
      name: ['Light', 'Bamboo', 'Little'][i % 3],
      l_name: ['Light', 'Bamboo', 'Little'][i % 3],
      r_name: ['Light', 'Bamboo', 'Little'][i % 3],
      description: 'Everything that has a beginning, has an end.',
    });
  }

  return () => (
    <DemoRow title="原始用法">
      <Table
        columns={fixedColumns}
        dataSource={fixedData}
        pagination={false}
        scroll={{ x: 2000, y: 500 }}
        bordered
        summary={() => (
          <Table.Summary fixed>
            <Table.Summary.Row>
              <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>
              <Table.Summary.Cell index={1}>left</Table.Summary.Cell>
              <Table.Summary.Cell index={2}>center</Table.Summary.Cell>
              <Table.Summary.Cell index={3}>right</Table.Summary.Cell>
            </Table.Summary.Row>
          </Table.Summary>
        )}
      />
    </DemoRow>
  );
});
